<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="handleQuery"
      @clear="clear"
    />
    <el-button type="primary" class="mb20" @click="handleImpower">抖音账号授权</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tableb"
    >
      <el-table-column
        align="center"
        label="登录账号"
        min-width="100"
        prop="userName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="用户呢称"
        min-width="120"
        prop="nickName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="真实姓名"
        min-width="100"
        prop="realName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="手机号"
        min-width="100"
        prop="phone"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="抖音头像"
        min-width="100"
        prop=""
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <el-image
            fit="contain"
            style="width: 40px;"
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="抖音呢称"
        min-width="100"
        prop="dyNickName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="授权时间"
        min-width="150"
        prop="authTime"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="授权到期时间"
        min-width="150"
        prop="expireTime"
        show-overflow-tooltip
      />

      <el-table-column
        align="center"
        label="操作"
        min-width="120"
        prop=""
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <div class="flex-cc">
            <el-button type="text" @click="handleCancel(scope.row)">取消关联</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="currentPageChange"
      @SizeChange="pageSizeChange"
    />
    <el-dialog
      :close-on-click-modal="modalDialog"
      :lose-on-press-escape="modalDialog"
      title="分享视频到抖音"
      :visible.sync="isOpenPub"
      width="800px"
    >
      <el-form ref="modal" :model="param" label-width="120px">
        <el-form-item label="视频来源">
          <el-select>
            <el-options label="上传视频" value="1" />
            <el-options label="精彩视频" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input />
        </el-form-item>
        <el-form-item label="封面" />
        <el-form-item label="地理位置">
          <el-input />
        </el-form-item>
        <el-form-item label="视频简介">
          <el-input v-model="param.remarks" class="w400" type="textarea" placeholder="请输入视频简介" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  DyImpower,
  DyImpowerPage,
  DyImpowerCancel,
  DyImpowerGetToken
} from '@/api'
export default {
  data() {
    return {
      filters: {},
      pagination: {
        rows: 10,
        page: 1
      },
      list: [],
      totalCount: 0,
      listLoading: false,

      isOpenPub: false,
      param: {},

      modalDialog: this.$store.state.app.dialog,
      queryFormConfig: {
        formItems: [
          {
            filed: 'userName',
            type: 'input',
            label: '登录账号'
          },
          {
            filed: 'phone',
            type: 'input',
            label: '手机号'
          }
        ],
        online: true
      },
      limitIndex: 0
    }
  },
  created() {
    this.getList()
    // const code = this.$route.query.code || ''
    // if (this.limitIndex === 0 && code) {
    //   DyImpowerGetToken({ param: { code }})
    //   this.limitIndex = this.limitIndex + 1
    // }
  },
  methods: {
    handleCancel(row) {
      DyImpowerCancel({ param: { id: row.id }}).then(res => {
        if (res.errorCode !== '000000') return
        this.$message.success('取消关联成功')
        this.getList()
      })
    },
    handleImpower() {
      DyImpowerPage({ param: {}}).then(res => {
        if (res.errorCode !== '000000') return
        window.open(res.record, '_blank')
      })
    },
    getList() {
      const { filters, pagination } = this
      this.listLoading = true
      DyImpower({ param: filters, pagination }).then(res => {
        this.listLoading = false
        this.list = res.recordList || []
        this.totalCount = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    handleQuery() {
      this.pagination.page = 1
      this.getList()
    },
    clear() {
      this.filters = {}
      this.handleQuery()
    },
    currentPageChange(val) {
      this.pagination.page = val
      this.getList()
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList()
    }
  }
}
</script>

<style>
</style>
